<template>
    <div>
        <el-card>
            <div>
                <el-form :inline="true">
                    <el-form-item>
                        <el-input v-model="khinput" placeholder="请输入客户账号"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="getMObanLost">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="AddMoxing">添加套餐</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="QueryAddTaoCan">查询添加套餐</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="danger" @click="deltaocan">删除</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-table :data="TemplateDown.data" ref="singleTable" style="width: 100%"
                @selection-change="handleSelectionChange" row-key="id">
                <el-table-column type="selection" align="center" width="55" :reserve-selection="true">
                </el-table-column>
                <el-table-column prop="phoneNumber" label="手机号">
                </el-table-column>
                <el-table-column prop="remark" label="套餐名称">
                </el-table-column>
                <el-table-column prop="times" label="频次范围">
                </el-table-column>
                <el-table-column prop="cities" label="城市范围">
                </el-table-column>
                <el-table-column prop="startTime" label="开始时间">
                </el-table-column>
                <el-table-column prop="endTime" label="结束时间">
                </el-table-column>
                <el-table-column prop="remark" label="备注">
                </el-table-column>

               
            </el-table>
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :page-sizes="[10, 50, 100, 1000]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
                :total="TemplateDown.total" style="margin: 20px 0;float: right;">
            </el-pagination>
            <el-dialog title="添加套餐" :visible.sync="Packageadd" width="400px">

                <el-form :inline="true" :model="formInline" label-width="80px" :label-position="labelPosition">

                    <el-form-item label="套餐名称">
                        <el-input v-model="formInline.PackageKey" placeholder="套餐名称"></el-input>
                    </el-form-item>
                    <el-form-item label="频次范围">
                        <el-select v-model="formInline.range" filterable placeholder="频次范围">
                            <el-option v-for="item in PinCiptions" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="时间">
                        <el-select v-model="formInline.Utime" filterable placeholder="时间">
                            <el-option v-for="item in addtimelist" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="城市范围">
                        <el-select v-model="formInline.Cityrange" filterable placeholder="城市范围">
                            <el-option v-for="item in Cityptions" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <div style="display: flex;align-items: center;">
                        <el-form-item label="域名对比" prop="dns">
                            <el-switch v-model="formInline.dns" :active-value="1" :inactive-value="2"
                                @change="changeSwitchone"></el-switch>
                        </el-form-item>
                        <el-form-item label="内容对比" prop="con">
                            <el-switch v-model="formInline.con" :active-value="1" :inactive-value="2"
                                @change="changeSwitchTwo"></el-switch>
                        </el-form-item>
                    </div>
                    <el-form-item label="备注">
                        <el-input v-model="formInline.KhName" placeholder="备注"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="Packageadd = false">取 消</el-button>
                    <el-button type="primary" @click="AddModelXing">确 定</el-button>
                </span>
            </el-dialog>

        </el-card>
        <el-drawer :visible.sync="drawerOne" :with-header="false" size="50%">
            <el-table :data="AllTaoCan.data" style="width: 100%">
                <el-table-column prop="mealName" label="套餐名称">
                </el-table-column>
                <el-table-column label="频次范围">
                    <template slot-scope="scope">
                        <span v-if="scope.row.timesType == 0">分钟</span>
                        <span v-if="scope.row.timesType == 1">小时</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="城市范围">
                    <template slot-scope="scope">
                        <span v-if="scope.row.cityType == 0">市级</span>
                        <span v-if="scope.row.cityType == 1">省会</span>
                    </template>
                </el-table-column> -->

                <el-table-column prop="cityNum" label="城市数量">
                </el-table-column>
                <el-table-column label="内容对比">
                    <template slot-scope="scope">
                        <span v-if="scope.row.con == 0">关闭</span>
                        <span v-if="scope.row.con == 1">开启</span>
                    </template>
                </el-table-column>
                <el-table-column label="区域对比">
                    <template slot-scope="scope">
                        <span v-if="scope.row.dns == 0">关闭</span>
                        <span v-if="scope.row.dns == 1">开启</span>
                    </template>
                </el-table-column>
                <el-table-column label="状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status == 2">失效</span>
                        <span v-if="scope.row.status == 1">生效中</span>
                    </template>
                </el-table-column>

                <el-table-column prop="remark" label="套餐备注">
                </el-table-column>
                <el-table-column prop="useTime" label="时间">
                </el-table-column>
                <el-table-column>
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                    </template>
                </el-table-column>

            </el-table>

            <el-drawer title="修改详情" :append-to-body="true" :visible.sync="innerDrawer">
                <el-form :inline="true" :model="ModifyDetails" label-width="80px" :label-position="labelPosition">

                    <el-form-item label="套餐名称">
                        <el-select v-model="ModifyDetails.mealName" filterable placeholder="套餐名称">
                            <el-option v-for="item in AllTaoCan.data" :key="item.id" :label="item.mealName"
                                :value="item.mealName">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="频次范围">
                        <el-select v-model="ModifyDetails.timesType" filterable placeholder="频次范围">
                            <el-option v-for="item in PinCiptions" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <div style="display: flex;align-items: center;">
                        <el-form-item label="域名对比" prop="dns">
                            <el-switch v-model="ModifyDetails.dns" :active-value="1" :inactive-value="2"
                                @change="changeone"></el-switch>
                        </el-form-item>
                        <el-form-item label="内容对比" prop="con">
                            <el-switch v-model="ModifyDetails.con" :active-value="1" :inactive-value="2"
                                @change="changeTwo"></el-switch>
                        </el-form-item>

                    </div>
                    <el-form-item label="时间">
                        <el-select v-model="ModifyDetails.useTime" filterable placeholder="时间">
                            <el-option v-for="item in addtimelist" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="城市数量">
                        <el-input v-model="ModifyDetails.cityNum" placeholder="城市数量"></el-input>
                    </el-form-item>
                    <el-form-item label="备注">
                        <el-input v-model="ModifyDetails.remark" placeholder="备注"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-button @click="innerDrawer = false">取 消</el-button>
                        <el-button type="primary" @click="xiugaiqueding">确 定</el-button>
                    </el-form-item>
                </el-form>
            </el-drawer>

        </el-drawer>
    </div>
</template>

<script>
import { SetMenu, AllCities, Addmenutc, QueryuseTime, DelTcan, QueryAddlist, modifyTaocan } from "@/api/table";
export default {
    data() {
        return {
            TemplateDown: [],
            khinput: '',
            labelPosition: 'right',
            pageCode: 1,
            pageSize: 10,
            Pageco: 1,
            PageSi: 10,
            AllTaoCan: [],
            drawerOne: false,
            Packageadd: false,
            ModifyDetails: {
                id: '',
                mealName: "",
                timesType: "",
                con: "",
                dns: "",
                remark: "",
                cityNum: "",
                useTime: ""
            },
            Cityptions: [
                {
                    value: 0,
                    label: '市级'
                },
                {
                    value: 1,
                    label: '省会'
                },

            ],
            PinCiptions: [
                {
                    value: 0,
                    label: '分钟'
                },
                {
                    value: 1,
                    label: '小时'
                }
            ],
            formInline: {
                KhName: '',
                PackageKey: '',
                range: '',
                Cityrange: '',
                dns: '',
                con: '',
                Utime: ''

            },
            innerDrawer: false,
            BatchChains: [],
            addtimelist: []
        };
    },
    created() {
        this.getMObanLost()
        // this.QueryAllCities()
        this.queryusershij()
    },
    methods: {
        async queryusershij() {
            let res = await QueryuseTime()
            this.addtimelist = res.data
        },
        async changeSwitch() {

        },
        async DelectMoban() {

        },
        async deltaocan() {
            let res = await DelTcan({ list: this.BatchChains })
            if (res.code == 200) {
                this.$message({
                    message: res.data,
                    type: 'success'
                });
                this.getMObanLost()
            } else {
                this.$message({
                    message: res.msg,
                    type: 'error'
                });
            }

        },
        // 取消选择
        setCurrent() {
            this.$refs.singleTable.clearSelection();
        },
        handleSelectionChange(val) {
            const newValueArray = val.map(item => item.id);
            this.BatchChains = newValueArray
            console.log(this.BatchChains)
        },
        queryAllTc() {
            QueryAddlist({
                currentPage: this.Pageco,
                PageSize: this.PageSi
            }).then(res => {
                this.AllTaoCan = res
            })
        },
        QueryAddTaoCan() {
            this.drawerOne = true
            this.queryAllTc()
        },
        async AddModelXing() {
            let res = await Addmenutc({
                mealName: this.formInline.PackageKey,
                cityType: this.formInline.Cityrange,
                timesType: this.formInline.range,
                con: this.formInline.con,
                dns: this.formInline.dns,
                remark: this.formInline.KhName,
                useTime: this.formInline.Utime

            })
            if (res.code == 200) {
                this.$message({
                    message: res.data,
                    type: 'success'
                });
                this.Packageadd = false
            } else {
                this.$message({
                    message: res.msg,
                    type: 'error'
                });
            }
        },
        // 添加模型弹窗
        AddMoxing() {
            this.Packageadd = true
        },
        // 查询全部城市
        // async QueryAllCities() {
        //     let res = await AllCities()
        //     const result = res.data
        //     // const names = result.map(item => item.label);
        //     this.Cityptions = result
        // },

        async getMObanLost() {
            let res = await SetMenu({
                userName: this.khinput,
                currentPage: this.pageCode,
                PageSize: this.pageSize

            });
            if (res.code == 200) {
                this.TemplateDown = res
            } else {
                this.$message({
                    message: res.msg,
                    type: 'error'
                });
            }
        },
        async handleClick(row) {
            this.innerDrawer = true
            console.log(row)
            this.ModifyDetails.id = row.id
            this.ModifyDetails.mealName = row.mealName
            this.ModifyDetails.timesType = row.timesType
            this.ModifyDetails.con = row.con
            this.ModifyDetails.dns = row.dns
            this.ModifyDetails.remark = row.remark
            this.ModifyDetails.useTime = row.useTime
            this.ModifyDetails.cityNum = row.cityNum

        },
        // 套餐修改 
        async xiugaiqueding() {
            let res = await modifyTaocan({
                id: this.ModifyDetails.id,
                mealName: this.ModifyDetails.mealName,
                timesType: this.ModifyDetails.timesType,
                con: this.ModifyDetails.con,
                dns: this.ModifyDetails.dns,
                remark: this.ModifyDetails.remark,
                useTime:this.ModifyDetails.useTime,
                cityNum: this.ModifyDetails.cityNum,
            })
            if (res.code == 200) { 
                this.$message({
                    message: res.data,
                    type: 'success',
                    duration:1000
                });
                this.innerDrawer = false
                this.QueryAddTaoCan()
            } else {
                this.$message({
                    message: res.msg,
                    type: 'error',
                    duration:1000
                });
            }
        },

        async handleSizeChange(val) {
            this.pageSize = val;
            this.getMObanLost()
        },
        async handleCurrentChange(val) {
            this.pageCode = val;
            this.getMObanLost()

        },
        changeSwitchone(e) {
            this.formInline.dns = e
        },
        changeone(e) {
            this.ModifyDetails.dns = e
        },
        changeTwo(e) {
            this.ModifyDetails.con = e
        },
        changeSwitchTwo(e) {
            this.formInline.con = e
        },

        // 清空每一项的值
        clearObject(obj) {
            for (let key in obj) {
                if (obj.hasOwnProperty(key)) {
                    obj[key] = '';
                }
            }
        },


    },
};
</script>

<style lang="scss" scoped></style>